<template>
  <div class="login">
    <!-- 登录的输入框 -->
    <el-card class="box-card" shadow="hover">
      <h2 class="login-title">人生得意须尽欢</h2>
      <el-form :rules="rules" ref="ruleForm" :model="form">
        <el-form-item prop="account">
          <el-input
            class="ipt-item"
            prefix-icon="el-icon-user"
            placeholder="请输入账号"
            v-model="form.account"
            @keyup.enter.native="submitForm('ruleForm')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input
            type="password"
            class="ipt-item2"
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
            v-model="form.pwd"
            @keyup.enter.native="submitForm('ruleForm')"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!--  底部  -->
    <div class="footer">
      <span>Designed by 龚科奥 , QQ: 694389397 , Email: gkafighting@163.com</span>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      // 账号信息的表单
      form: {
        account: undefined,
        pwd: undefined,
      },
      // 表单校验
      rules: {
        account: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },

  created() {
    // 路由到登录界面时,清除sessionStorage中的登录信息
    sessionStorage.removeItem("loginMsg");
  },

  methods: {
    // 将vuex中的mutations映射到methods中
    ...mapMutations(["SET_ID"]),

    // 提交表单
    submitForm(formName) {
      // 先校验表单
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 校验通过则发请求登陆
          this.gGet("/user/login", this.form).then((res) => {
            if (res.data.code == "1") {
              this.$message({
                message: res.data.msg,
                type: "success",
              });
              // 登陆成功执行mutations
              this.SET_ID(res.data.userid);
              // 跳转到首页
              this.$router.push({
                path: "/index/userinfo",
              });
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.ipt-item {
  margin-top: 30px;
}

.ipt-item2 {
  margin-top: 10px;
}

h2 {
  color: gray;
}

.login-title {
  display: block;
  width: 100%;
  text-align: center;
}

.login {
  position: absolute;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url("https://s1.ax1x.com/2020/10/10/0s80SO.jpg");
  /* background-image: url("../../assets/loginbgcimg.jpg"); */
  background-size: cover;
}

.box-card {
  position: absolute;
  margin-left: -200px;
  margin-top: -150px;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 300px;
}

.login-btn {
  /* position: absolute;
  bottom: 30px; */
  margin-top: 20px;
  width: 100%;
}

.footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: aliceblue;
  font-family: Arial;
  font-size: 16px;
  letter-spacing: 1px;
}
</style>
